<template xmlns:el-col="http://www.w3.org/1999/html">
    <section>
        <!--工具条-->
        <el-row type="flex" class="row-bg" justify="end">
            <el-col :span="5">
                <el-button type="primary" plain="" @click="handleSave">保存</el-button>
            </el-col>
        </el-row>
        <el-row type="flex" class="row-bg">
            <el-col :span="20"style="padding-bottom: 0px; ">
                <el-form :inline="true" size="small">
                    <el-row type="flex" class="row-bg toolbar grid-border text-color" style="line-height: 40px;">

                        <el-col :span="12" :offset="2"><span>重要性</span></el-col>
                        <el-col :span="12"><span>不符合条款数量</span></el-col>
                    </el-row>

                    <!--  =============================== 三颗星 =============================== -->
                    <el-row type="flex" class="row-bg grid-content grid-border">
                        <el-col :span="4" :offset="2">
                            <div class="stars"><i v-for="o in 3"><img src="/assets/images/star.png" alt="star" /></i></div>
                        </el-col>
                        <el-col :span="5"  v-if="!isNullTrue(item_a)">
                            <check-setting :low="item_a.three_low" :high="item_a.three_high" :echo_position="'a,3'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_b)">
                            <check-setting :low="item_b.three_low" :high="item_b.three_high" :echo_position="'b,3'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_c)">
                            <check-setting :low="item_c.three_low" :high="item_c.three_high" :echo_position="'c,3'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_d)">
                            <check-setting :low="item_d.three_low" :high="item_d.three_high" :echo_position="'d,3'" @echoVal="echoVal"></check-setting>
                        </el-col>
                    </el-row>

                    <!--  =============================== 二颗星 =============================== -->
                    <el-row type="flex" class="row-bg grid-content grid-border">
                        <el-col :span="4" :offset="2">
                            <div class="stars"><i v-for="o in 2"><img src="/assets/images/star.png" alt="star" /></i></div>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_a)">
                            <check-setting :low="item_a.two_low" :high="item_a.two_high" :echo_position="'a,2'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_b)">
                            <check-setting :low="item_b.two_low" :high="item_b.two_high" :echo_position="'b,2'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_c)">
                            <check-setting :low="item_c.two_low" :high="item_c.two_high" :echo_position="'c,2'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_d)">
                            <check-setting :low="item_d.two_low" :high="item_d.two_high" :echo_position="'d,2'" @echoVal="echoVal"></check-setting>
                        </el-col>
                    </el-row>

                    <!--  =============================== 一颗星 =============================== -->
                    <el-row type="flex" class="row-bg grid-content grid-border">
                        <el-col :span="4" :offset="2">
                            <div class="stars"><i><img src="/assets/images/star.png" alt="star" /></i></div>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_a)">
                            <check-setting :low="item_a.one_low" :high="item_a.one_high" :echo_position="'a,1'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_b)">
                            <check-setting :low="item_b.one_low" :high="item_b.one_high" :echo_position="'b,1'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_c)">
                            <check-setting :low="item_c.one_low" :high="item_c.one_high" :echo_position="'c,1'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_d)">
                            <check-setting :low="item_d.one_low" :high="item_d.one_high" :echo_position="'d,1'" @echoVal="echoVal"></check-setting>
                        </el-col>
                    </el-row>

                    <!--  =============================== 全部 =============================== -->
                    <el-row type="flex" class="row-bg grid-content grid-border">
                        <el-col :span="4" :offset="2">
                            <div class="stars">全部</div>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_a)">
                            <check-setting :low="item_a.total_low" :high="item_a.total_high" :echo_position="'a,t'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_b)">
                            <check-setting :low="item_b.total_low" :high="item_b.total_high" :echo_position="'b,t'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_c)">
                            <check-setting :low="item_c.total_low" :high="item_c.total_high" :echo_position="'c,t'" @echoVal="echoVal"></check-setting>
                        </el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_d)">
                            <check-setting :low="item_d.total_low" :high="item_d.total_high" :echo_position="'d,t'" @echoVal="echoVal"></check-setting>
                        </el-col>
                    </el-row>

                    <!--  =============================== 安全等级 =============================== -->
                    <el-row type="flex" class="row-bg grid-bottom-height">
                        <el-col :span="4"  :offset="2" class="text-color">安全等级</el-col>
                        <el-col :span="5"  v-if="!isNullTrue(item_a)" style="padding-left:20px"><img :src="'/assets/images/' + dict.check_result_level[item_a.check_result]" alt="A" /></el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_b)" style="padding-left:20px"><img :src="'/assets/images/' + dict.check_result_level[item_b.check_result]" alt="B" /></el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_c)" style="padding-left:20px"><img :src="'/assets/images/' + dict.check_result_level[item_c.check_result]" alt="C" /></el-col>
                        <el-col :span="5" v-if="!isNullTrue(item_d)" style="padding-left:20px"><img :src="'/assets/images/' + dict.check_result_level[item_d.check_result]" alt="D" /></el-col>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
    </section>


</template>

<script>
    import * as api from '../../api/auth_api.js';

    import CheckSettingEdit from './dialog/CheckSettingEdit';
    import dict from '../../common/js/dict';

    export default {
        components: {
            'check-setting': CheckSettingEdit
        },
        data() {
            return {
                item_a: {},
                item_b: {},
                item_c: {},
                item_d: {},

                low: 0,
                high: 0,
                echo_position: [],
                dict: dict
            }
        },
        methods: {
            getItems() {
                api.checkResultList().then((res) => {
                    if (res.data.status === 200) {
                        let datas = JSON.parse(res.data.datas);
                        datas.forEach((item) => {
                            item = deleItemInspect(item);
                            if(item.check_result == "0") {
                                this.item_a = item;
                            }
                            else if(item.check_result == "1") {
                                this.item_b = item;
                            }
                            else if(item.check_result == "2") {
                                this.item_c = item;
                            }
                            else {
                                this.item_d = item;
                            }
                        })

                    } else {
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }
                    function deleItemInspect(item) {
                        delete item.gmtCreated;
                        delete item.gmt_modified;
                        delete item.status;
                        delete item.update_user_id;
                        delete item.create_user_id;
                        return item;
                    }

                });
            },

            // ========================================= add start ===============================================
            handleSave() {
                var params = [];
                if(!this.isNullTrue(this.item_a)){params.push(this.item_a);}
                if(!this.isNullTrue(this.item_b)){params.push(this.item_b);}
                if(!this.isNullTrue(this.item_c)){params.push(this.item_c);}
                if(!this.isNullTrue(this.item_d)){params.push(this.item_d);}
                api.editCheckResult(params).then((res) => {
                    if (res.data.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });

                        this.getItems();
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.getItems();
                    }
                });
            }
            // ========================================= add end ===============================================
            ,echoVal(row){
                if(row.echo_position.indexOf('a') != -1) {
                    this.item_a = assignmentVal(this.item_a, row);
                }
                else if(row.echo_position.indexOf('b') != -1) {
                    this.item_b = assignmentVal(this.item_b, row);
                }
                else if(row.echo_position.indexOf('c') != -1) {
                    this.item_c = assignmentVal(this.item_c, row);
                }
                else if(row.echo_position.indexOf('d') != -1) {
                    this.item_d = assignmentVal(this.item_d, row);
                }
                function assignmentVal(item,row) {
                    if(row.echo_position.indexOf('3') != -1) {
                        item.three_low = row.num_low;
                        item.three_high = row.num_high;
                    }
                    else if(row.echo_position.indexOf('2') != -1) {
                        item.two_low = row.num_low;
                        item.two_high = row.num_high;
                    }
                    else if(row.echo_position.indexOf('1') != -1){
                        item.one_low = row.num_low;
                        item.one_high = row.num_high;
                    }
                    else {
                        item.total_low = row.num_low;
                        item.total_high = row.num_high;
                    }
                    return item;
                }
            }

            ,isNullTrue(row){
                return JSON.stringify(row) == "{}";
            }

        },
        mounted() {
            this.$nextTick(function () {

                this.getItems();
            })
        }

    }
</script>
<style>
    /*
    background: #f0f0f0;
        border-bottom: 1px solid #ebeef5;
    */
    .grid-content {
        border-radius: 4px;
        line-height: 40px;
        color: #909399;
    }
    .grid-border {
        height: 60px;
        line-height: 60px;
        padding-left: 26px;
        /*text-align: center;*/
        border-bottom: 1px solid #ebeef5;
    }
    .text-color {
        color: #333;
        font-weight: 600;
        vertical-align: middle;
    }
    .grid-bottom-height {
        height: 100px;
        line-height: 100px;
        /*text-align: center;*/
        border-bottom: 1px solid #ebeef5;
    }
    img{cursor:pointer}
.big-img{max-width:100%}
    .row-bg {
        padding: 10px 0;
        /*background-color: #f9fafc;*/
    }

    .row_tootip_msg {
        color: #6f7180;
        /*background-color: #f9fafc;*/
    }

</style>
